import React from 'react'
import styles from './index.css';


/**
 * 分页组件
 * 属性：
 * 1. current：初始页码
 * 2. total：总数据量
 * 3. limit：页容量，每页显示的数据量
 * 4. panelNumber：数字页码最多显示多少个
 * 5. onPageChange：当页码改变的事件
 */
export default function Pager(props) {
    const pageNumber = getPageNumber(props);
    if (pageNumber === 0) {//如果没有数据就什么都不显示
        return null
    }
    const minNumber = getMinNumber(props);
    const maxNumber = getMaxNumber(minNumber, pageNumber, props)

    let numArr = []
    for (let i = minNumber; i <= maxNumber; i++) {
        let dom = <span key={i}
            onClick={() => { toPage(i, props) }}
            className={props.current === i ? `${styles.item} ${styles.active}` : styles.item}>{i}</span>
        numArr.push(dom)
    }

    return (
        <>
            <span
                onClick={() => { toPage(1, props) }}
                className={props.current === 1 ? `${styles.item} ${styles.disabled}` : styles.item}

            >首页</span>
            <span
                onClick={() => { toPage(props.current - 1 < 1 ? 1 : props.current - 1, props) }}
                className={props.current === 1 ? `${styles.item} ${styles.disabled}` : styles.item}>上一页</span>
            {numArr}
            <span
                onClick={() => { toPage(props.current + 1 < pageNumber ? props.current + 1 : pageNumber, props) }}
                className={props.current === pageNumber ? `${styles.item} ${styles.disabled}` : styles.item}>下一页</span>
            <span
                onClick={() => { toPage(pageNumber, props) }}
                className={props.current === pageNumber ? `${styles.item} ${styles.disabled}` : styles.item}>尾页</span>
            <span className={styles.current}>
                {props.current}
            </span>
            /
            <span>{pageNumber}</span>
        </>
    )
}

/**
 * 计算总页数
 * @param {*} props
 */
function getPageNumber(props) {
    return Math.ceil(props.total / props.limit)
}

/**
 * 跳转到某一页
 * @param {*} target 目标页码
 * @param {*} props 所有属性
 */
function toPage(target, props) {
    // console.log("target:",target, "props.current:",props.current);

    if (props.current === target) {
        return
    }
    props.onPageChange && props.onPageChange(target)
}


/**
 * 计算最小数字
 */

function getMinNumber(props) {
    let min = props.current - Math.floor(props.panelNumber / 2)
    if (min < 1) { min = 1 }
    return min
}


/**
 * 计算最大数字
 * @param {*} min
 * @param {*} pageNumber
 */
function getMaxNumber(min, pageNumber, props) {
    let max = min + props.panelNumber - 1
    if (max > pageNumber) {
        max = pageNumber
    }
    return max
}